<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>商品详情</title>


    <style>

        #font-color{
            color: white;
            background-color:rgb(34, 33, 33);

        }
        #log-ss{
            top:0px;
            width: 0%;
        }
        #BS a:hover{
                color: red;
        }
        .navbar {
            position: relative;
            min-height: 50px;
            margin-bottom: 0px;
            border: 1px solid transparent;
        }

    </style>

</head>
<body>
       <!--导航begin-->
       <%@ include file="../common/nav.jsp" %>
       <!--导航eng-->
<div class="container-fluid" style="padding: 0px; margin: 0px;" >
    <ul class="breadcrumb" style="font-size: 16px; margin-bottom: 0px;">
        <li><a href="#">商城首页</a></li>
        <li style="padding: 0 10px;"><a href="#" style="padding-left: 10px;">小米</a></li>
        <li style="padding: 0 10px;"><a href="#" style="padding-left: 10px;">Redmi K30</a></li>
    </ul>
</div>

<div class="container-fluid"> 
    <div class="row col-md-6">
        <a ><img style="height: 450px; width: 450px; margin: 30px 250px; "  src="imgs/Redmi K30 large.jpg" alt="" srcset=""></a>

    </div>
    <div  class="row col-md-6">
        <div class="row" style="height: 70px;">
            <label style="border: 20px;font-size: 32px;color:black;margin-top: 50px;margin-left: 65px;margin-bottom: 0px;">Redmi K30</label>
        </div>
        <div class="row"> 
            <label style="margin-top: 20px;margin-left: 65px;font-weight: 300;">该商品预计2020年1月31日前发货</label>
        </div>
        <ul class="list-group" style="margin-left: 40px;">
            <li class="list-group-item" style="border-left: 0px; border-right: 0px;">现价:&nbsp&nbsp<span style="font-size: 20px;">&nbsp&nbsp￥</span><span style="font-size: 30px ; font-weight: bold;">1699.00</span></li>
            <li class="list-group-item" style="border-left: 0px; border-right: 0px; padding-bottom: 40px;">
                <div style="float: left; margin-top: 5px;">
                    最近销量&nbsp&nbsp58
                </div>
                <div style="float: left; margin-left: 150px;margin-top: 5px;">
                累计评价&nbsp&nbsp0
            </div>
            <div style="float: left;margin-left: 150px; margin-top: 5px;">
                累计收藏宝贝&nbsp&nbsp14
            </div>
            </li>
            <li class="list-group-item" style="border: 0px; margin-top: 25px;">型号:<button type="button" style="margin-left: 20px;width: 50px;height: 34px; color: red; border: solid 1px red; background-color: white;">常规</button></li>
            <li class="list-group-item" style="border: 0px; margin-top: 0px;">规格:<button type="button" style="margin-left: 20px;width: 50px;height: 34px; color: red; border: solid 1px red; background-color: white;">常规</button></li>
            <li class="list-group-item" style="border: 0px; margin-top: 0px;">数量:<input type="number" value="1" max="100" min="1" step="1" style="margin-left: 20px;"><span style="margin-left: 10px;">(库存充足)</span> <br>
            <li class="list-group-item" style="border-left: 0px; border-right: 0px; margin-top: 0px;"><button type="button" style="margin-left: 20px;width: 158px;height: 48px; color: white; border: 0px; background-color:red;font-size: 18px;" >立即购买</button>
            <button class="btn btn-link" onclick="addCart(this,'${userLogin.username}',${b.id},'${b.imgUrl}','${b.bookName}','${b.intro}',${b.price})" style="margin-left: 30px;width: 158px;height: 48px; color: white; border: 0px; background-color:green;font-size:18px;" >加入购物车</button></li></li>
            
        </ul>
    </div>
</div>
<div class="container-fluid"> 
<div class="row">
    <div class="col-sm-8" style="margin-left: 80px; margin-top: 60px;">
        <div class="tabs-container" >
            <ul class="nav nav-tabs" >
                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">商品详情</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">用户点评</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">售后服务</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <div class="panel-body">
                            <img src="imgs/Detailed1.jpg" alt="">
                            <img src="imgs/Detailed2.jpg" alt="">
                            <img src="imgs/Detailed3.jpg" alt="">
                            <img src="imgs/Detailed4.jpg" alt="">
                            <img src="imgs/Detailed5.jpg" alt="">
                            <img src="imgs/Detailed6.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <span style="margin-left: 300px; height: 100px;width: 100px; margin-top: 50px; margin-bottom: 50px;" >未查找到该商品!</span>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">
                        <img src="imgs/售后服务.png" style="margin-left: 50px;height: 900px; width: 900px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <%@ include file="../common/footer.jsp" %>
        <script src="plugins/jquery/jquery.min.js"></script>
        <script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <script>
            $('#myCarousel').carousel({
                interval: 2000
            })
            //        添加购物车
            function addCart(obj,username,bookid,imgUrl,bookName,intro,price){
                //this代表的是当前按钮的对象 - button
                //js - 操作dom - document object model
                //js来根据一个节点来获取上一个兄弟节点
                var num = obj.previousElementSibling.value;

                window.location="${path}/addCart?username="+username+"&bookid="+bookid+"&imgUrl="+imgUrl+"&bookName="+bookName+"&intro="+intro+"&price="+price+"&num="+num+"&total="+num*price;

        </script>


</body>
</html>